<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>收藏店铺</title>
    <link rel="stylesheet" type="text/css" href="../../../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../css/style.css"/>
      <style>
      html,body{
          /*background: #fff;*/
      }
      header{
        width: 100%;
        height: 6.85rem;
        line-height: 4.5rem;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.4rem 1.3rem 0 1.3rem;
        border-bottom: 0.05rem solid #f2f2f2;
        box-sizing: border-box;
      }
      header img{
        width: 0.9rem;
        height: 1.8rem;
        display: block;
      }
      header ul{
        display: flex;
        width: 11.4rem;
        justify-content: space-between;
      }
      header ul li{
        width: 4.3rem;
        font-size: 1.6rem;
        color: #333;
        height: 4.3rem;
        line-height: 4.3rem;
        text-align: center;
        box-sizing: border-box;
      }
      .active{
        border-bottom: 0.2rem solid #ed691f;
      }
      .header div{
        font-size: 1.4rem;
        color: #999;
        width: 2.7rem;
      }
      /* 导航 */
      nav{
        width: 100%;
        height: 4rem;
        background: #fff;
      }
      nav ul:nth-child(1){
        padding: 0 2.25rem 0 2.25rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      nav ul:nth-child(1) li{
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        box-sizing: border-box;
        font-size: 1.4rem;
        color: #333；
      }
      nav ul:nth-child(2){
        padding: 0 1.4rem 0 1.4rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
      .nav_active{
        width: 4.4rem;
        height: 0.2rem;
        background-color: #ed691f;
      }
      /*店铺内容*/
      main{
        margin-top: 0.05rem;
        overflow: hidden;
      }
      main ul{
        width: 100%;
        height: 7.8rem;
        line-height: 7.8rem;
        display: flex;
        align-items: center;
        justify-content:space-between;
        position: relative;
      }
      main ul li{
        padding: 0 1.3rem 0 1.3rem;
        width: 100%;
        height: 6.4rem;
        display: flex;
        line-height: 6.4rem;
        font-size: 1.6rem;
        color: #333;
      }
      main ul li .box{
        display: flex;
        align-items: center;
      }
      main ul li .box .left {
        position: relative;
        margin-right: 1.1rem;
      }
      main ul li .box .left img:nth-child(1){
        width: 4.8rem;
        height: 4.8rem;
      }
      main ul li .box .left img:nth-child(2){
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        top: 3.6rem;
        left: 3.6rem;
      }
      main ul li span{
        display: block;
        flex: 1;
        border-bottom: 0.05rem solid #f2f2f2;
      }
      main ul li .right{
        width:2rem;
        display: flex;
        flex-direction: column;
        border-bottom: 0.05rem solid #f2f2f2;
      }
      main ul li .right div{
        flex: 1;
        height: 2rem;
      }
      main ul li .right div:nth-child(1){
        width: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #ed691f;
        font-size: 1.3rem;
      }
      main ul li .right div:nth-child(2){
        width: 2rem;
        line-height: 2rem;
        text-align: center;
        font-size: 1rem;
        color: #ed691f;
      }
      main ul li .right div:nth-child(3){
        width: 2.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      main ul li .right div:nth-child(3) img{
        width: 0.9rem;
        height:0.2rem;
      }
      .aui-checkbox{
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 100%;
        background: #fff;
        margin-left: 1.3rem;
        margin-right: 0.6rem;
        position: relative;
        border: 0.1rem solid #999;
      }
      .aui-checkbox:checked{
          background: #fc3131;
          border:solid 1px #fc3131;
      }
      .aui-checkbox::after{
          width: 1rem!important;
          height: 0.7rem!important;
          margin-top:-0.5rem!important;
          margin-left:-0.5rem!important;
      }
     .aui-checkbox::before{
         width: 1rem!important;
         height: 0.7rem!important;
         margin-top:-0.5rem!important;
         margin-left:-0.5rem!important;
     }
      .main_li{
        position: absolute;
        left: 2.35rem;
      }
      .bottom{
        width: 100%;
        height: 4.9rem;
      }
      /*商品内容*/
      .shop_box{
        margin-top: 1rem;
        width: 100%;
        position: relative;
        height: 10rem;
        display: flex;
        align-items: center;
      }
      .shop_box .shop_content{
        width: 93%;
        /*margin: 0 auto;*/
        height: 10rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #fff;
        box-shadow: 0rem 0.1rem 1.37rem 0.09rem
      		rgba(28, 28, 28, 0.06);
      	border-radius: 0.5rem;
        position: absolute;
        left: 1.3rem;
      }
      .shop_box .shop_content img{
        width: 9.9rem;
        height: 10rem;
      }
      .shop_box .shop_move img{
        width: 9.9rem;
        height: 10rem;
      }
    .shop_content_right{
        width: 100%;
        height: 10rem;
        padding: 1.55rem 0 1.7rem 0.9rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .shop_content_right .top{
        font-size: 1.3rem;
        color: #333;
      }
       .shop_content_right .bottom{
        display: flex;
        width: 100%;
        height: 1.4rem;
        align-items: center;
      }
       .shop_content_right .bottom .left{
        font-size: 1.4rem;
        color: #de002b;
        margin-right: 2.2rem;
      }
       .shop_content_right .bottom .right{
        font-size: 1.2rem;
        color: #666;
      }
      .shop_move{
        width: 93%;
        margin: 0 auto;
        height: 10rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        background: #fff;
        box-shadow: 0rem 0.1rem 1.37rem 0.09rem
      		rgba(28, 28, 28, 0.06);
      	border-radius: 0.5rem;
        position: absolute;
        left: 3.65rem;
        top: 0rem;
      }
      /*底部*/
      footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 4.9rem;
        line-height: 4.9rem;
        box-shadow: 0rem -0.05rem 0.15rem 0rem
	      	rgba(0, 0, 0, 0.19);
        font-size: 1.4rem;
        background: #fff;
      }
      footer .footer_box{
        padding: 0 1.3rem 0 1.3rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      footer .footer_box .left{
        display: flex;
        align-items: center;

      }
      footer .footer_box .left .aui-checkbox{
        margin-left: 0rem!important;
      }
      footer .footer_box .left .checked_box{
        margin-right: 0.6rem;
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 50%;
        border: 0.1rem solid #999;
      }
      footer .footer_box div:nth-child(2){
        width: 6.9rem;
        height: 3rem;
        border-radius: 1.5rem;
	      border: solid 0.05rem #ed6a20;
        line-height: 3rem;
        text-align: center;
        color: #ed6a20;
      }
      </style>
  </head>
  <body>
  <div id="app">
        <header>
            <img src="../../../../image/back.png" @click="goBack()">
            <ul>
              <li @click="change(1)" :class="title_nav==1?'active':''">商品</li>
              <li @click="change(2)" :class="title_nav==2?'active':''">店铺</li>
            </ul>
            <div @click="tration">管理</div>
        </header>
        <!-- 导航 -->
        <nav>
          <ul>
            <!-- 店铺循环 -->
            <li v-for="(item,index) in nav_list1" @click="clickNav(index)" v-if="title_nav==2?true:false">
              {{item.text}}
            </li>
            <!-- 商品循环 -->
            <li v-for="(item,index) in nav_list2" @click="clickNav(index)" v-if="title_nav==1?true:false">
              {{item.text}}
            </li>
          </ul>
          <!-- 店铺底下移动块 -->
          <ul v-if="title_nav==2?true:false">
            <li :class="border_nav==0?'nav_active':''"></li>
            <li :class="border_nav==1?'nav_active':''" style="margin-right:1.5rem"></li>
            <li :class="border_nav==2?'nav_active':''"></li>
            <li :class="border_nav==3?'nav_active':''"></li>
          </ul>
          <!-- 商品底下移动块 -->
          <ul v-if="title_nav==1?true:false">
            <li :class="border_nav==0?'nav_active':''"></li>
            <li :class="border_nav==1?'nav_active':''"></li>
            <li :class="border_nav==2?'nav_active':''"></li>
            <li :class="border_nav==3?'nav_active':''"></li>
            <li :class="border_nav==4?'nav_active':''"></li>
          </ul>
        </nav>
        <!-- 内容 -->
        <main>
          <!-- 店铺列表 -->
          <ul v-for="(item,index) in storeList" v-if="title_nav==2?true:false">
            <input type="checkbox" class="aui-checkbox" @click="clickCheck($event)" v-if="isCheck" :value="index">
            <li :class="main_id?'main_li':''">
              <div class="box">
                <div class="left">
                   <img :src="item.img1" alt="">
                   <img :src="item.img2" alt="">
                </div>
              </div>
              <span>{{item.store}}</span>
              <div class="right">
                <div>{{item.number}}</div>
                <div>{{item.gonew}}</div>
                <div>  <img :src="item.img3" alt=""></div>
              </div>
            </li>
          </ul>
          <!-- 商品列表 -->
          <div class="shop_box" v-for="(item,index) in shopList" v-if="title_nav==1?true:false">
              <input type="checkbox" class="aui-checkbox" @click="clickCheck($event)" v-if="hideCheck" :value="item.goods_id" :id="item.goods_id" v-model="checkShop">
              <div :class="main_id?'shop_move':'shop_content'" ref="refshop">
                  <img :src="item.goods_logo" alt="">
                  <div class="shop_content_right">
                      <div class="top">{{item.goods_name}}</div>
                      <div class="bottom">
                          <div class="left">¥{{item.price}}</div>
                          <div class="right">{{item.collect_nums}}人收藏</div>
                      </div>
                  </div>
              </div>
          </div>
        </main>
        <!-- 当列表有很多，做个垫块 -->
        <div class="bottom" v-if="isBottom"></div>
        <!-- 底部全选 -->
        <footer v-if="title_nav==1?isFooter:hideFooter">
            <div class="footer_box">
              <div class="left">
              <input type="checkbox" class="aui-checkbox" @click="allCheck($event)" v-if="isCheck">
                全选
              </div>
              <div>删除</div>
            </div>
        </footer>

  </div>
  </body>
  <script type="text/javascript" src="../../../../script/api.js"></script>
  <script type="text/javascript" src="../../../../script/axios.min.js"></script>
  <script type="text/javascript" src="../../../../script/axios-config.js"></script>
  <script type="text/javascript" src="../../../../script/zepto.js"></script>
  <script type="text/javascript" src="../../../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../../../script/swiper.min.js"></script>
  <script type="text/javascript" src="../../../../script/utils.js"></script>
  <script type="text/javascript" src="../../../../script/common.js"></script>
  <script type="text/javascript" src="../../../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../../../script/aui-pull-refresh.js"></script>


  <script type="text/javascript">
      apiready = function(){

      };
      new Vue({
        el:"#app",
        data:{
          // 店铺二级菜单
          nav_list1:[
            {text:'全部'},
            {text:'最近关注'},
            {text:'最近更新'},
            {text:'分类'},
          ],
          // 商品二级菜单
          nav_list2:[
            {text:'默认'},
            {text:'降价'},
            {text:'促销'},
            {text:'分类'},
            {text:'库存'},
          ],
          // 收藏店铺列表
          storeList:[
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'不要劳动的熊小姐',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'祝小兔的店',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'不要劳动的熊小姐',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'祝小兔的店',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'不要劳动的熊小姐',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
            {img1:'../../../../image/capital/heade.png',img2:'../../../../image/capital/home.png',store:'祝小兔的店',number:'5',gonew:'上新',img3:'../../../../image/capital/spot.png'},
          ],
          // 收藏商品列表
          shopList:[

          ],
          title_nav:1,       //商品列表的默认状态
          border_nav:'',     //导航栏底下移动块
          main_id:false,     //当点击管理,列表的class名的动态显示
          isCheck:false,     //商品列表单选按钮
          hideCheck:false,   //店铺列表单选按钮
          isFooter:false,    //商品列表全选按钮
          hideFooter:false,  //店铺列表全选按钮
          isBottom:false,    //当列表有很多，垫块的创建与删除
          empty:[],          //存放列表的索引值
          checkShop:[]
        },
        methods:{
          // 商品、店铺的选择事件
          change:function(e){
            this.title_nav=e
            var storeList = this.storeList
            console.log(JSON.stringify(storeList))
            if(e==2){
              if(storeList.length<1){
                var token = $api.getStorage('token');
                var page = 1
                var data = {
                  token:token,
                  page:page
                }
                // 获取店铺收藏列表
                Axios.post(window.Url.collect_store, data).then(function(res){
                     console.log(JSON.stringify(res));
                })
              }

            }
          },
          // 导航切换事件
          clickNav:function(index){
            console.log(index)
            this.border_nav=index
          },
          // 点击管理
          tration:function(){
            console.log(this.title_nav)
            if(this.title_nav==1){
              this.isBottom=true
              this.isCheck=!this.isCheck
              this.isFooter=!this.isFooter
              this.main_id=!this.main_id
            }

          },
          // 选择删除钮
          clickCheck:function(e){
            // console.log(e)
            var check = e.target.checked
            var list = this.storeList
            var empty = this.empty
            var id = e.target._value
            if(check==true){
              empty.push(id)
              // console.log(empty)
              // for(var a=0; a<empty.length;a++){
              //   for(var i=0; i<list.length;i++){
              //     if(list[i].id==empty[a]){
              //       console.log(list[i].id)
              //       console.log(empty)
              //
              //     }
              //   }
              // }
            }

          },
          // 全选
          allCheck:function(e){
            // this.clickCheck()
            var list = this.storeList
            var check = e.target.checked  //是否选中
            // console.log(check)
            if(check==true){
                var empty = this.empty
                var checkShop = this.checkShop
                if(empty=[]){
                  for(var a= 0;a<list.length;a++){
                    empty.push(a)
                  }
                }

              // if(empty.indexOf(id)== -1&&shop[a].status==0){
              //     empty.push(id);
              // }
              // id++
              console.log(empty)

            }
          },
          goBack:function(){
            api.closeWin({

            });
          }
        },

        mounted:function(){
          var that = this
          var token = $api.getStorage('token');
          var type = 0   // 0全部  1降价  2失效
          var page = 1  // 页数
          var shop_data = {
              token:token,
              type:type,
              page:page
          }
          // 获取商品收藏列表
          Axios.post(window.Url.collect_lis, shop_data).then(function(res){
              console.log(JSON.stringify(res));
              that.shopList = res.index_goods_list_new
          })
        }

      })
  </script>
  </html>
